<template>
  <div>
    <h1>登录页面</h1>
    <el-input
      type="password"
      v-model="ruleForm.phone"
      placeholder="请输入手机"
      autocomplete="off"
    ></el-input>
    <el-input
      type="password"
      v-model="ruleForm.password"
      placeholder="请输入密码"
      autocomplete="off"
    ></el-input>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </div>
</template>

<script>
import { login as apilogin } from "@/api";
import { SET_LOCAL_ITEM } from "@/utils/utils";
export default {
  data() {
    return {
      // formdata: {
      //   phone: "13226803206",
      //   password: "123",
      // },
      // 表单数据源
      ruleForm: {
        phone: "13226803206",
        password: "123",
      },
      // 表单验证规则
      rules: {
        phone: [{ trigger: "blur" }],
        password: [{ trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      console.log("kai");
      apilogin(this.ruleForm).then((res) => {
        let token = res.data.result.token;
        SET_LOCAL_ITEM("token", token);
        this.$message({
          type: "success",
          message: "登录成功",
          duration: 500,
        });
        this.$router.replace("/");
      });
    },
    resetForm() {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>